<script lang="ts" setup>
import {ref} from "vue";

const searchValue = ref('')
const search = () => {
  console.log(searchValue.value)
}
const stuList = ref([
  {
    id: 1
  },
  {
    id: 2
  },
  {
    id: 3
  }
])

const shareShow = ref(false)
const share = () => {
  shareShow.value = true
}

const savePic = () => {
  const query = uni.createSelectorQuery().select('.container');
  query.boundingClientRect(data => {
    const ctx = uni.createCanvasContext('myCanvas');
    // 绘制选中的元素到 canvas 上
    ctx.drawImage(data.path, data.left, data.top, data.width, data.height, 0, 0, data.width, data.height);
    ctx.draw(true, () => {
      uni.canvasToTempFilePath({
        canvasId: 'myCanvas',
        success(res) {
          console.log('临时文件路径:', res);
        },
        fail(err) {
          console.error('截图失败:', err);
        }
      });
    });
  }).exec();
}
</script>

<template>
  <view class="container">
    <up-popup :round="10" :show="shareShow" closeOnClickOverlay mode="bottom" safeAreaInsetBottom
              @close="shareShow=false">
      <view class="popup">
        <view class="title">
          <up-text color="#393939" size="30rpx" text="请选择分享方式"></up-text>
        </view>
        <view class="menu">
          <view class="popup-item" @click="savePic">
            <view class="download">
              <up-icon bold color="#fff" name="download" size="50rpx"></up-icon>
            </view>
            <up-text margin="6rpx" size="20rpx" text="保存图片"></up-text>
          </view>
          <view class="popup-item">
            <view class="weixin">
              <up-icon bold color="#fff" name="weixin-fill" size="50rpx"></up-icon>
            </view>
            <up-text margin="6rpx" size="20rpx" text="转发朋友"></up-text>
          </view>
        </view>
      </view>
    </up-popup>
    <view class="search">
      <up-input
          v-model="searchValue"
          custom-style="background:#fff;"
          fontSize="32rpx"
          placeholder="请输入标签名称关键词查询"
          prefix-icon="search"
          prefix-icon-style="font-size:40rpx;"
          shape="circle"
          @change="search"></up-input>
    </view>
    <view class="item">
      <view class="header">
				<span class="title">
					自信放光芒
				</span>
        <view class="share" @click="share">
          <up-icon name="share"></up-icon>
        </view>
      </view>
      <view class="content">
        <up-text color="#808080" margin="12rpx 0" size="24rpx" text="男生人数：12 女生人数：12"></up-text>
        <up-text color="#808080" margin="12rpx 0" size="24rpx" text="标签ID：202303235456789"></up-text>
        <up-text color="#808080" margin="12rpx 0" size="24rpx" text="标签创建人:王亚丽"></up-text>
        <up-text color="#808080" margin="12rpx 0" size="24rpx" text="标签创建日期:2024/4/5"></up-text>
        <up-text color="#808080" margin="12rpx 0" size="24rpx" text="最近更新日期:2024/4/5"></up-text>
      </view>
    </view>
    <up-text margin="32rpx" size="32rpx" text="学生名单(3)"></up-text>
    <view v-for="item in stuList " :key="item.id" class="roster">
      <img alt="" class="profile-photo" src="/static/image/bg.png">
      <span class="name">王紫意</span>
      <span class="id">1009000</span>
    </view>
  </view>
</template>


<style lang="scss" scoped>
.container {
  padding: 30rpx;
  width: 100vw;

  .popup {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding: 30rpx;
    width: 100%;
    height: 340rpx;
    background: #FFFFFF;
    border-radius: 48rpx 48rpx 0 0;

    .menu {
      display: flex;
      width: 341rpx;
      height: 140rpx;
      margin-top: 46rpx;

      .popup-item {
        margin-right: 128rpx;

        .download {
          width: 92rpx;
          height: 92rpx;
          background-image: linear-gradient(131deg, #FEB061 2%, #FF922D 98%);
          border-radius: 50%;
          display: flex;
          justify-content: center;
          align-items: center;
        }

        .weixin {
          width: 92rpx;
          height: 92rpx;
          background-image: linear-gradient(131deg, #61FE82 1%, #0BB683 100%);
          border-radius: 50%;
          display: flex;
          justify-content: center;
          align-items: center;
        }
      }
    }
  }

  .search {
    display: flex;
  }

  .item {
    width: 686rpx;
    height: 336rpx;
    padding: 30rpx;
    background: #FFFFFF;
    box-shadow: 0 6rpx 12rpx 0 #dae4f080;
    border-radius: 24rpx;

    .header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 40rpx;
      width: 100%;
    }
  }

  .roster {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: 686rpx;
    height: 140rpx;
    background: #FFFFFF;
    box-shadow: 0 6rpx 12rpx 0 #dae4f080;
    border-radius: 24rpx;
    filter: blur(0);
    margin: 10rpx 0;
    color: #000000;

    .profile-photo {
      width: 50px;
      height: 50px;
      border-radius: 50%;
      object-fit: cover;
      justify-content: center;
      margin-right: 24rpx;
      margin-left: 32rpx;
    }

    .name {
      font-weight: 500;
      font-size: 32rpx;
      margin-right: 24rpx;
    }

    .id {
      font-weight: 400;
      font-size: 24rpx;
      color: #393939;
    }
  }
}
</style>